<template>
  <div class="supply-wrap flex text-[14px] text-[#333] items-center">
    <el-checkbox v-model="hasSupplyPrice" class="flex items-center">
      <span class="mr-[4px]">按供货价的</span>
      <el-input
        v-model="supplyPrice"
        class="w-[115px]"
        type="number"
        :min="0.01"
        :max="100"
      >
        <template #append>%</template>
      </el-input>
      <span class="ml-[4px]">转换为美元</span>
    </el-checkbox>
  </div>
</template>
<script setup>
const props = defineProps({
  value: { type: Object, default: () => ({}) },
})

const hasSupplyPrice = ref(false)
const supplyPrice = ref()

const emit = defineEmits(['input'])

watch(
  () => [hasSupplyPrice.value, supplyPrice.value],
  val => {
    const [_hasSupplyPrice, _supplyPrice] = val || []
    if (_hasSupplyPrice == undefined) {
      emit('input')
      return
    }
    emit(
      'input',
      val
        ? {
            supply_price: _supplyPrice,
            has_supply_price: _hasSupplyPrice,
          }
        : null
    )
  }
)

watch(
  () => props.value,
  val => {
    const { supply_price = '', has_supply_price = false } = val || {}
    supplyPrice.value = supply_price
    hasSupplyPrice.value = !!has_supply_price
  }
)
</script>
